<template>
    <div :class="prefixCls">
        <Tree-node v-for="item in data" :show-key="showKey" :check-key="checkKey" v-show="nodeVisable(item)" :visbile-key="visbileKey" :visbile-reverse="visbileReverse" :key="item.nodeKey" :data="item" visible :multiple="multiple" :show-checkbox="showCheckbox">
            <template slot="node" slot-scope="node">
                <slot name="node" :data="node.data"></slot>
            </template>
        </Tree-node>
        <div :class="[prefixCls + '-empty']" v-if="!data.length">{{ localeEmptyText }}</div>
    </div>
</template>
<script>
import { Tree } from "iview";
import TreeNode from "./node";
export default {
  extends: Tree,
  props: {
    //控制显示字段的翻转，在picker中区分选中和未选中项
    visbileReverse: {
      default: false
    },
    //自定义显示控制字段，用于控制数据过滤的显示
    visbileKey: {
      default: null
    },
    checkKey: {
      default: "checked"
    },
    //自定义显示字段
    showKey: {
      default: "title"
    }
  },
  methods: {
    nodeVisable(item) {
      return this.visbileKey
        ? item.show !== this.visbileReverse && item[this.visbileKey] !== false
        : item.show !== this.visbileReverse;
    }
  },
  components: {
    TreeNode
  }
};
</script>
